<style lang="stylus" scoped>
  .ratings
    position absolute
    top 174px
    bottom 0
    overflow-y auto
    .score
      padding 18px 0
      display flex
      align-items center
      .left
        width 136px 
        flex 0 0 136px
        border-right 1px solid rgba(7,17,27,0.1)
        .synthesis
          font-size 24px
          color rgb(255,153,0)
          line-height 28px
          text-align center
          margin-bottom 6px
        .fen
          font-size 14px
          color rgb(7,17,27)
          line-height 12px
          text-align center
          margin-bottom 8px
        .compare
          font-size 12px
          color rgba(7,17,27,0.6)
          line-height 10px
          text-align center
      .right
        padding 0 22px
        .item
          display flex
          margin-bottom 8px
          align-items center
          .title
            font-size 12px
            color rgb(7,17,27)
            line-height 12px
            margin-right 12px
          .num
            font-size 12px
            color rgb(147,153,159)
            line-height 12px
          .starnum
            font-size 12px
            color rgb(255,153,0)
            line-height 12px
            margin-left 12px
    .box
      height 16px
      width 100%
      background #f3f5f7
      border-top 1px solid rgba(7,17,27,0.1)
      border-bottom 1px solid rgba(7,17,27,0.1)
    .main
      margin 0 18px
    .mainlist
      padding 0 18px
      border-top 1px solid rgba(7,17,27,0.1)
      li
        display flex
        padding 18px 0
      .left
        width 28px
        flex 0 0 28px
        margin-right 12px
        .icon
          width 28px
          height 28px
          border-radius 50%
      .right
        flex 1
        .top
          display flex
          margin-bottom 6px
          .name
            flex 1
            p
              font-size 12px
              color rgb(7,17,27)
              line-height 12px
            .score
              display flex
              padding 4px 0 0 0
              span 
                font-size 10px
                font-weight 200
                color rgb(147,153,159)
                line-height 12px
            .star
              margin-right 6px
          .time
            font-size 10px
            font-weight 200
            color rgb(147,153,159)
            line-height 12px
        .center
          font-size 12px
          color rgb(7,17,27)
          line-height 18px
          margin-bottom 8px
        .botton
          display flex
          align-items center
          .iconfont
            font-size 12px
            color rgb(183,187,191)
            line-height 16px
            margin-right 8px
            &.icon-dianzan
              color rgb(0,160,220)
          span
            font-size 9px
            color rgb(147,153,159)
            line-height 16px
            height 18px
            margin-right 8px
            border 1px solid rgb(147,153,159)
            width 60px
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            padding 0 6px
            box-sizing border-box
            text-align center
</style>


<template>
  <div class="ratings">
    <div class="score">
      <div class="left">
        <p class="synthesis">{{seller.score}}</p>
        <p class="fen">综合评价</p>
        <p class="compare">高于周边商家{{seller.rankRate}}%</p>
      </div>
      <div class="right">
        <div class="item">
          <span class="title">食物评分</span>
          <Star class="star" :size='36' :score="seller.foodScore"></Star>
          <span class="starnum">{{seller.foodScore}}</span>
        </div>
        <div class="item">
          <span class="title">服务态度</span>
          <Star class="star" :size='36' :score="seller.serviceScore"></Star>
          <span class="starnum">{{seller.serviceScore}}</span>
        </div>
        <div class="item">
          <span class="title">送达时间</span>
          <span class="num">{{seller.deliveryTime}}分钟</span>
        </div>
      </div>
    </div>
    <div class="box"></div>
    <myeva :ratings="ratings" :isactive="isactive" :isimg="isimg" v-on:change="change" class="main"></myeva>
    <ul class="mainlist">
      <li :key="index" v-for="(rating,index) in myratings">
        <div class="left">
          <img class="icon" :src="rating.avatar">
        </div>
        <div class="right">
          <div class="top">
            <div class="name">
              <p>{{rating.username}}</p>
              <div class="score">
                <Star class="star" :size='24' :score="rating.score"></Star>
                <span>{{rating.deliveryTime}}分钟送达</span>
              </div>
            </div>
            <div class="time">{{rating.rateTime}}</div>
          </div>
          <p class="center">{{rating.text}}</p>
          <div class="botton">
            <i class="iconfont" :class="rating.rateType ? 'icon-cai' : 'icon-dianzan'"></i>
            <span :key="index" v-for="(item,index) in rating.recommend" v-show="(index < 4)">{{item}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Star from '@/components/star.vue'
import myeva from '@/components/myeva.vue'
export default {
  name: 'goods',
  data () {
    return {
      seller:{},
      ratings:[],
      isimg:true,
      isactive:2
    }
  },
  components:{
    Star,
    myeva
  },
  created () {
    this.$http.get('/api/sellers').then((response) => {
      this.seller = response.data
    })
    this.$http.get('/api/ratings').then((response) => {
      this.ratings = response.data
    })
  },
  computed:{
    myratings () {
      let self = this
      return this.ratings.filter(function(val){
        let isOK = true
        if(self.isactive == 2 && val.rateType != 0) {
          isOK = false
        }else if(self.isactive == 3 && val.rateType != 1) {
          isOK = false
        }
        if(self.isimg && !val.text) {
          isOK = false
        }
        if(isOK) {
          return val
        }
      })
    }
  },
  methods:{
    change(val) {
      if(typeof val == 'boolean') {
        this.isimg = !this.isimg
      }else{
        this.isactive = val
      }
    },
  }
}
</script>